<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        a{
            width: 100px;
            height: 50px;
            background:red;

            text-decoration: none;
            
           text-align: center;

           line-height: 50px;

           display: inline-block;
           
           /* background-image: url(./图片/小米平衡车.png); */
        }
       
        /* 伪类选择器 链接的颜色*/
        a:hover
        {
            color:aqua;
            /* 悬停时背景  和字体*/
            background:yellowgreen;
        }


        *
        {
            margin: 0;
            padding: 0;
        }
       
     .one
     {
        margin: 50px auto;
        
        background-color: #ffc0cb;
        
        width: 640px;
        height: 50px;
        
     }

     ul{
        list-style: none;
     }

     .one li{
        float: left;
     }

      .one  li a{
        display:inline-block;
        width: 80px;

        height: 50px;

        background-color: green;
      }


    </style>
</head>
<body>
    /* <!-- .one: hover --> */
    /* <!-- { --> */
        /* <!-- background:red; --> */
    /* <!-- } --> */
    /* <!--   <a href="#" class="one" > 导航</a> --> */
    /* <a href="#">导航1</a> */
    /* <a href="#">导航2</a> */
    /* <a href="#">导航3</a> */
    /* <a href="#">导航4</a> */
    /* <a href="#">导航5</a>   */

    <div></div>
    <div></div>
    <div></div>
    <div></div>


    <div class="one">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">3</a></li>
    </ul>
    </div>
</body>
</html>